Esta línea en mi función de constructor tarda 0,15 ms en ejecutarse.
[].push.apply(this, selector);Por favor, no me digas que el tiempo de 0,15 ms es aceptable. Espero que haya alguna opción más rápida.
Porque creo que esta línea está convirtiendo NodeList/HTMLCollection en matriz. No necesariamente necesito convertirlo en una matriz. Es por eso que creo que se puede reemplazar con otra cosa. ¿Puedes pensar en?
(function () { 'use strict'; function Query(selector) { if (selector.indexOf('.') !== -1) { selector = document.querySelectorAll(selector); } else { selector = document.getElementsByTagName(selector); } [].push.apply(this, selector); } function $(selector) { return new Query(selector); } Query.prototype = new Array; Query.prototype.hide = function () { for (var i=0,len=this.length; i<len; i++) { this[i].style.display = 'none'; } return this; }; window.$= $; }());Siguiendo las sugerencias de @SebastianSimon this[0] = selector[0]; y @PeterSeliger this.push(...selector); en los comentarios, pensé en la idea de for-loop.
Después de algunas pruebas, lo encontré más rápido que "[].push.apply(this, selector);".
Tomaré sugerencias de desarrolladores más experimentados al respecto.
(function () { 'use strict'; function Query(selector) { if (selector.indexOf('.') !== -1) { selector = document.querySelectorAll(selector); } else { selector = document.getElementsByTagName(selector); } //[].push.apply(this, selector); var i=0, len=selector.length; for (; i<len; ) { this[i] = selector[i++]; } this.length = len; } function $(selector) { return new Query(selector); } Query.prototype = new Array; Query.prototype.hide = function () { for (var i=0,len=this.length; i<len; i++) { this[i].style.display = 'none'; } return this; }; window.$= $; }()); (function () { 'use strict'; class Query extends Array { constructor(selector) { super(); this.push(...document.querySelectorAll(selector)); } hide() { for (var idx = 0, len = this.length; idx < len; idx++) { this[idx].style.display = 'none'; } return this; } show() { for (var idx = 0, len = this.length; idx < len; idx++) { this[idx].style.display = ''; } return this; } } function $(selector) { return new Query(selector); } window.$ = $; }()); const query = $('span'); setTimeout(() => query.hide(), 1000); setTimeout(() => $('.quick-fox > span').show(), 2000); setTimeout(() => console.log({ query }), 3000); setTimeout(() => console.log('query.push(...$("p")) ...', query.push(...$("p"))), 4000); setTimeout(() => console.log({ query }), 5000); <p class="foo-bar"> <span>foo</span> <span>bar</span> <span>baz</span> </p> <p class="quick-fox"> <span>The</span> <span>quick</span> <span>brown</span> <span>fox</span> </p>